<template>
    <div class="netVideo">
        <div class="video">
            <PlayVideo :info="info"></PlayVideo>
        </div>
        <div class="control">
            <textarea name="" class="text" v-model="url" id="" placeholder="请输入视频地址"></textarea>
            <button class="button" @click="playVideo">播放</button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PlayVideo from '@renderer/components/PlayVideo/index.vue'
const url = ref('')
const info = ref({
    uid: '',
    path: '',
    name: ''
})
const playVideo = () => {
    info.value = {
        uid: url.value,
        path: url.value.trim(),
        name: '网络视频'
    }
}
</script>

<style scoped lang="scss">
.netVideo {
    width: 100vw;
    height: 100vh;
    display: grid;
    grid-template-columns: 1fr 250px;
    overflow: hidden;
    background-color: var(--back);

    .video {
        color: white;
        flex: 1;
    }

    .control {
        display: grid;
        gap: 10px;
        padding: 10px;

        .text {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
            resize: none;
            outline-color: #007bff;
            background-color: var(--back);
            color: var(--text);
        }

        .button {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            height: 50px;
        }
    }
}
</style>